<template>
  <div class="wrap" v-if="list.length > 0">
    <div class="title">团队长等级</div>
    <div class="listRow">
      <div class="itemRow">
        <div class="row1 row">会员等级</div>
        <div class="row2 row">满足条件</div>
        <div class="row3 row">团队业绩</div>
        <div class="row4 row">团队收益</div>
      </div>
      <div class="itemRow itemRowOhter" v-for="(item,index) in list" :key="index">
        <div class="row1 row rowOhter">{{item.name}}</div>
        <div class="row2 row rowOhter">{{item.need_mid_count}}名{{item.need_mid == 0 ? '有效会员': redeceName(item.need_mid)}}</div>
        <div class="row3 row rowOhter">{{item.need_amount}}U</div>
        <div class="row4 row rowOhter">{{item.rewards_profit}}%</div>
      </div>
    </div>
    <div class="title" style="margin-top: 20px">等级倒挂烧伤</div>
    <div class="tex">
      当前团队长的直属下级等级高于或等于团队长等级时直属下级及其团队收益，在向当前账号贡献团队奖励时会产生烧伤效果，则当前团队长只能获得原本团队奖励贡献的5%
    </div>
  </div>
</template>
<script>
import Fetch from '@/utils/fetch'
	export default {
		name: "teamLev",
		props: {

		},
    data(){
      return {
        list:[]
      }
    },
    mounted() {
      this.getDeatil()
    },
    methods: {
      redeceName(id){
        const result = this.list.find(obj => obj.id == id);
        if(result){
          return result.name + '团长'
        }else {
          return  ''
        }
      },
        getDeatil(){
          Fetch('/index/vip_list').then((r) => {
             if(r.code == 1){
               this.list = r.data
             }
          });
        },
		},
	}
</script>
<style lang="less" scoped>
   .wrap{
     padding-bottom: 50px;
     .title{
       font-weight: bold;
       font-size: 14px;
       color: #010101;
     }
     .listRow{
       border-radius: 8px;
       overflow: hidden;
       margin-top: 20px;
       .itemRow{
         display: flex;
         .row{
           display: flex;
           align-items: center;
           justify-content: center;
           height: 36px;
           color: #ffffff;
         }
         .row1{
           flex: 1;
           background: #0358D9;
         }
         .row2{
           flex: 2;
           background: #0069FF;
         }
         .row3{
           flex: 1;
           background: #1F7AFB;
         }
         .row4{
           flex: 1;
           background: #408CF8;
         }
       }
       .itemRowOhter{
         .rowOhter{
           background: #DAF7FF;
           color: #0C0C0C;
         }
       }
       .itemRowOhter:nth-child(odd) {
         .rowOhter{
           background-color: #DEEBFE;
           color: #0C0C0C;
         }
       }
     }
     .tex{
       margin-top: 10px;
       font-size: 14px;
     }
   }
</style>
